<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/world.css" />
    <link rel="stylesheet" href="./css/world_OverlayScrollbars.css">
    <link rel="stylesheet" href="./css/world_swipe.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <script src="./js/world_jquery.js"></script>
    <script src="./js/world.js"></script>
    <script src="./js/world_jquery.overlayScrollbars.min.js"></script>
    <style>
        body {
            width: 100%;
            height: 1080px;
        }
    </style>
</head>

<body>
    <header class="clearfix">
        <div class="header_left">
            <div class="header_line"></div>
            <div class="header_one">
                <ul>
                    <li class="music">
                        <i class="star"></i>
                        <audio src="./video/BGM.mp3" autoplay controls style="display: none;"></audio>
                    </li>
                    <li>
                        <a href="#"><img src="./images/yuanshen_logo.png" alt=""></a>
                    </li>
                    <li class="as home"><a href="#">首页</a></li>
                    <li class="as news"><a href="#">新闻</a></li>
                    <li class="as Roles"><a href="#">角色</a></li>
                    <li class="as world selecta"><a href="#">世界</a></li>
                    <li class="as manhua"><a href="#">漫画</a></li>
                    <li class="as shequ"><a href="#">社区</a></li>
                </ul>
            </div>
        </div>
        <div class="header_right">
            <span>
                <a href="#" class="User">登&nbsp录</a>
                <img src="" alt="" class="iconfont icon-yonghu">
            </span>
        </div>
    </header>

    <!-- 登录 -->
    <div class="Sing_big clearfix">
        <div class="sign_logo"><img src="./images/MIlogo.png" alt=""></div>
        <div class="Sign clearfix">
            <strong class="close_nav">X</strong>
            <ul>
                <li class="message">短信登录</li>
                <li class="password" style="color: black;">密码登录</li>
            </ul>
            <div class="xian"></div>
            <div class="sign_nav clearfix">
                <div class="message_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号登录/注册">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="text" name="" id="account" class="telephone" maxlength="4" placeholder="验证码">
                    <p id="account_x"></p>
                    <i class="shu">|</i>
                    <input type="button" name="" id="" class="Verification" value="获取验证码">
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
                <div class="password_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号/邮箱/用户名">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="password" name="" id="account" class="telephone" maxlength="4" placeholder="密码">
                    <p id="account_x"></p>
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 最外层大盒子 -->
    <div class="G-bigBox ">
        <!-- 第一个板块 -->
        <div class="G-one G-Gngs">
            <div class="G-min">
                <img src="./images/tiwate.png" alt="" class="img1" />
                <img src="./images/tiwate2.png" alt="" class="img2" />
                <div class="G-p">
                    <p>这里是七种元素交汇的幻想世界「提瓦特」。</p>
                    <p>
                        在遥远的过去，人们藉由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。
                    </p>
                    <p>五百年前，古国的覆灭却使得天地变异…</p>
                    <p>如今，席卷大陆的灾难已经停息，和平却仍未如期光临。</p>
                </div>
                <a href="https://ys.mihoyo.com/main/town">
                    <p class="G-p2">前往游记精选</p>
                </a>
            </div>
            <div class="G-homeTip">
                <div class="G-homeImg">
                    <img src="./images/sanjiaoxin.png" alt="" class="home__tran" />
                </div>
            </div>
        </div>

        <!-- 第二个大板块 -->
        <div class="G-two G-Gngs">
            <section class="G-city" style="background-image: url('./images/mengdebeijng.jpg')">
                <div class="city-content">
                    <img src="./images/mengde.png" alt="" class="city-icon" />
                    <h1 class="city-name">蒙德</h1>
                    <div class="city-desc">
                        <p>
                            位于提瓦特大陆东北部的自由城邦。
                            <br /> 群山和广袤的平原间，自由之风携着蒲公英的气息吹拂过果酒湖，为坐落于湖心岛上的蒙德城送去风神巴巴托斯的祝福与恩泽。
                        </p>
                    </div>
                    <button class="city-detail">
                <p>查看详情</p>
              </button>
                </div>
            </section>
        </div>

        <!-- 第三个大板块 -->
        <div class="G-three G-Gngs">
            <section class="G-city" style="background-image: url('./images/liyuegangbeijin.jpg')">
                <div class="city-content">
                    <img src="./images/liyue.png" alt="" class="city-icon" />
                    <h1 class="city-name">璃月</h1>
                    <div class="city-desc">
                        <p>
                            位于提瓦特大陆东方的富饶港湾。
                            <br /> 傲然矗立的山麓与石林、广袤的平原与生机勃勃的河滩共同构成了璃月的丰富地貌，在四季分明的气候下焕发出多彩的风华。山石奇景间，又埋藏了多少岩之魔神的古老馈赠等待着人们发掘呢？
                        </p>
                    </div>
                    <button class="city-detail">
                <p>查看详情</p>
              </button>
                </div>
            </section>
        </div>
    </div>

    <!-- 页尾开始 -->

    <footer class="footer">
        <ul class="footer_socialbar">
            <li class="footer_item weibo"></li>
            <li class="footer_item qq"></li>
            <li class="footer_item weixin"></li>
            <li class="footer_item share"></li>
        </ul>
        <div class="share_wrap">
            <p>分享至</p>
            <ul style="margin-left: 34px">
                <li style="background-position: -74px -74px"></li>
                <li style="background-position: -74px -10px"></li>
                <li style="background-position: -138px -138px"></li>
                <li style="background-position: -10px -138px"></li>
            </ul>
        </div>
        <div id="footer_top">
            <div>
                <div class="mihoyo-cn-footer mihoyo-cn-footer-ys-mihoyo">
                    <div class="footer_content">
                        <div class="footer_logo">
                            <ul>
                                <li>
                                    <div style="display: flex; align-items: center">
                                        <img src="./images/footer-mihoyo.png" style="width: auto; height: 42px" />
                                        <span></span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="./images/footer-logo.png" style="width: 110px; height: auto" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="footer_info">
                            <div class="footer_link">
                                <div class="footer_protocol">
                                    <div>
                                        <a href="https://ys.mihoyo.com/company/agreement" class="protocol" target="_blank">用户协议</a
                        >
                        |
                        <a
                          href="https://ys.mihoyo.com/company/privacy"
                          class="protocol"
                          target="_blank"
                          >隐私政策</a
                        >
                        |
                        <a
                          href="https://jiazhang.mihoyo.com/#/"
                          class="protocol"
                          target="_blank"
                          >家长监护工程</a
                        >
                        |
                        <a
                          href="http://www.mihayou.com/company.html"
                          target="_blank"
                          class="about-us protocol"
                          >关于我们</a
                        >
                        |
                        <a
                          href="http://www.mihayou.com/contact.html"
                          target="_blank"
                          class="contract-us protocol"
                          >联系我们</a
                        >
                        |
                        <a
                          href="http://www.mihayou.com/add.html"
                          target="_blank"
                          class="join-us protocol"
                          >加入我们</a
                        >
                      </div>
                    </div>
                  </div>
  
                  <div class="footer_advice">
                    <p class="advice_info">
                      健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                    </p>
                    <div class="inline_info">
                      <a
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402001113"
                        class="footer-filing-item"
                        target="_blank"
                        >沪公网安备31010402001113号</a
                      >
                      <span class="split_line"> | </span>
                      <span class="footer_filing_item"
                        >增值电信业务经营许可证：沪B2-20190555</span
                      >
                    </div>
                  </div>
  
                  <div class="footer_filing">
                    <div class="footer_filing_content">
                      <a
                        href="https://beian.miit.gov.cn/#/Integrated/index"
                        target="_blank"
                        class="footer-filing-item"
                        >沪ICP备19018275号-4</a
                      >
                      <span class="split_line"> | </span>
                      <span> 沪网文〔2019〕3168-216号 </span>
                      <span class="split_line"> | </span>
                      <span>国新出审【2019】2978号</span>
                    </div>
                    <div class="footer_filing_tip">
                      <span>互联网违法不良信息举报邮箱: tousu@mihoyo.com </span>
                      <span
                        >互联网违法不良信息举报电话: 021-34203135
                        （工作时间：每天10点 - 20点）</span
                      >
                    </div>
                  </div>
  
                  <div class="footer-tip">
                    亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
                  </div>
  
                  <div class="mihoyo-copyright">
                    ©2012-2020 上海米哈游影铁科技有限公司版权所有
                  </div>
  
                  <div class="footer_icon">
                    <a
                      href="https://v.yunaq.com/certificate?domain=www.mihoyo.com&amp;from=label&amp;code=90020"
                      target="_blank"
                      ><img src="./images/footer-icon1.png" alt=""
                    /></a>
                                        <a href="http://www.shjbzx.cn/" target="_blank"><img src="./images/footer-icon2.png" alt="" /></a>
                                        <a href="https://www.12377.cn/" target="_blank"><img src="./images/footer-icon3.png" alt="" /></a>
                                        <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/8955A9DDE1FF8B6CE053010A14ACA87F" target="_blank"><img src="./images/footer-icon4.png" alt="" /></a>
                                        <a href="#" target="_blank"><img src="./images/footer-icon5.png" alt="" /></a>
                                        <a href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020190314100540000004452331-SAIC_SHOW_310000-20200120150237277642&signData=MEYCIQCjn9IhIKfUHjPlx9W6xrYPZ4GA73Blopwp0iEzSX0OHQIhAOZm3tnlWLrgVXMtvgp5OibauIgiAa+2d+MQ7qzMIm6t"
                                            target="_blank"><img src="./images/footer-icon6.png" alt="" /></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </footer>

    <!-- 固定电梯导航 -->
    <div class="G_fixedtool">
        <ul>

            <li class="G-gnindex">

                首页
                <div class="G-guide-icon"></div>

            </li>
            <li class="G-gnindex">
                蒙德
                <div class="G-guide-icon"></div>
            </li>
            <li class="G-gnindex">
                璃月
                <div class="G-guide-icon"></div>
            </li>
            <li class="louti">
                敬请期待
                <div class="G-guide-icon"></div>
            </li>
            <div class="G-guide-line"></div>
        </ul>
    </div>

    <!-- 点击查看详情弹出的蒙德div  -->

    <div class="G-detail" id="G-detail1" style="display: none">
        <div class="G-detail-content">
            <p class="G-detail-tittle">蒙德</p>
            <button class="G-detail-btn"></button>

            <div class="G-detail-wrap " id="G-Mscroll">
                <div class="G-scroll">
                    <div class="G-detail-article">
                        <h1>果酒湖</h1>
                        <p>
                            环绕蒙德城的天然淡水湖泊。
                            <br /> 宽广的湖面和粼粼的波光历经千百年不变，水澈见底，入口清冽甘甜。正是这样的水源成就了蒙德美酒的盛名，也让果酒湖成为了蒙德的重要标志之一。
                        </p>
                        <p><img src="./images/mengdetanchu.jpg" alt="" /></p>
                        <p>&nbsp;</p>
                        <h1>鹰翔海滩</h1>
                        <p>
                            从风起地往东延伸至海边，鹰翔海滩与誓言岬共同围成三面环海的陆地，环绕着蒙德东面的海湾。 鉴于海岸线较长且地处浅海位置，经常有蒙德市民前来游玩。偶尔可见苍鹰翱翔于碧浪白沙之上。
                        </p>
                        <p><img src="./images/mengdetanchu2.jpg" alt="" /></p>
                        <p>&nbsp;</p>
                        <h1>誓言岬</h1>
                        <p>
                            位于蒙德城东南角、风啸山坡边缘的海岬。
                            <br /> 传说曾有一对恋人在此许下誓言，并留下一个感人至深的故事。至今此地仍被认为是恋人的好去处。
                        </p>
                        <p><img src="./images/mengdetanchu3.jpg" alt="" /></p>
                        <p>&nbsp;</p>
                        <h1>晨曦酒庄</h1>
                        <p>
                            位于蒙德城西南方的晨曦酒庄，代代传承着蒙德传统的酿酒工艺。
                            <br /> 这里种植着大面积的葡萄等作物，用它们酿造出的各类酒品风靡整个提瓦特大陆。
                        </p>
                        <p><img src="./images/mengdetanchu4.jpg" alt="" /></p>
                        <p>&nbsp;</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="G-detail" id="G-detail2" style="display: none">
        <div class="G-detail-content">
            <p class="G-detail-tittle">璃月</p>
            <button class="G-detail-btn"></button>

            <div class="G-detail-wrap" id="G-Mscroll">
                <div class="G-scroll">
                    <div class="G-detail-article">
                        <h1>港口</h1>
                        <p>
                            港口的建立为璃月的海上贸易打下了最初的基础。作为提瓦特大陆上最大的集贸港口，其货物吞吐量也绝非一般港口可比拟。
                            <br /> 每年海灯节时，在港口处可以看到海上万千宵灯飞入夜幕，是到访璃月不可错过的奇景。
                        </p>
                        <p><img src="./images/liyuetancu1.jpg" alt="" /></p>
                        <p>&nbsp;</p>
                        <h1>天衡山</h1>
                        <p>
                            璃月港西边的山脉，也是抵御外敌的一道天然保护屏障。
                            <br> 有记载以来，作为璃月的壁垒经历了数不清的大小战争，因此也可以看到不少古城墙、堡垒和防御工事的遗迹。
                            <br> 传说中璃月人最早的采矿作业亦在此处进行。
                        </p>
                        <p><img src="./images/liyuetancu2.jpg" alt="" /></p>
                        <p>&nbsp;</p>
                        <h1>荻花洲</h1>
                        <p>
                            荻花洲得名于浅滩中大面积生长的荻花，是璃月北部的一处天然浅滩湿地。
                            <br /> 水泽遍布、河网交错纵横，由多样的动植物群落组成了丰富的生态系统，也构成了来往旅客眼中绝佳的景观。
                            <p><img src="./images/liyuetancu3.jpg" alt="" /></p>
                            <p>&nbsp;</p>
                            <h1>望舒客栈</h1>
                            <p>
                                荻花洲的地标，修建在一座巨大岩柱上的客栈。
                                <br /> 来歇息的大多是途径此处的商贩，客栈也因此提供了直接贸易和摆摊的场所。高层位置视野极佳，天气晴朗时可以直接看到远处的轻策山和绝云间。
                            </p>
                            <p><img src="./images/liyuetancu4.jpg" alt="" /></p>
                            <p>&nbsp;</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    $(".home").click(function() {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function() {
            window.location.href = "Home.html";
        }, 5000)
    })

    $(".news").click(function() {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function() {
            window.location.href = "News.html";
        }, 5000)
    })


    $(".Roles").click(function() {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function() {
            window.location.href = "Role.html";
        }, 5000)
    })


    $(".world").click(function() {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function() {
            window.location.href = "World.html";
        }, 5000)
    })

    $(".manhua").click(function() {
        $("body").children().eq(0).append(`<div class="loading"></div>`)
        setTimeout(function() {
            window.location.href = "manga_index.html";
        }, 5000)
    })

    $(".home").mousemove(function() {
        $(".header_line ").css("left", "460px")
    })

    $(".home").mouseout(function() {
        $(".header_line ").css("left", "715px")
    })
    $(".news").mousemove(function() {
        $(".header_line ").css("left", "545px")
    })

    $(".news").mouseout(function() {
        $(".header_line ").css("left", "715px")
    })


    $(".Roles").mousemove(function() {
        $(".header_line ").css("left", "630px")
    })

    $(".Roles").mouseout(function() {
        $(".header_line ").css("left", "715px")
    })


    $(".world").mousemove(function() {
        $(".header_line ").css("left", "715px")
    })

    $(".world").mouseout(function() {
        $(".header_line ").css("left", "715px")
    })


    $(".manhua").mousemove(function() {
        $(".header_line ").css("left", "802px")
    })

    $(".manhua").mouseout(function() {
        $(".header_line ").css("left", "715px")
    })

    $(".shequ").mousemove(function() {
        $(".header_line ").css("left", "888px")
    })

    $(".shequ").mouseout(function() {
        $(".header_line ").css("left", "715px")
    })

    var music = document.querySelector("audio");
    setTimeout(function() {
        music.play();
    }, 1000)
    $(document).ready(function() {
        music.play();
    })

    $(".music").click(function() {
        $(".music>i").toggleClass("stop");
        if (music.paused) {
            music.play();

        } else {
            music.pause();
        }
    })


    //登录触动变色
    $(".header_right span").mousemove(function() {
        $(".User").css("color", "white")
        $(".iconfont .icon-yonghu").css("color", "red")
    })

    $(".header_right span").mouseleave(function() {
        $(".User").css("color", "#ccc")
        $(".iconfont .icon-yonghu").css("color", "red")
    })


    // 线条移动
    $(".message").click(function() {
        $(".xian").css("left", "120px")
        $(".message_nav").show();
        $(".password_nav").hide();
        $(".message").css("color", " #ce965f")
        $(".password").css("color", "black")
    })

    $(".password").click(function() {
        $(".xian").css("left", "305px")
        $(".password_nav").show();
        $(".message_nav").hide();
        $(".password").css("color", " #ce965f")
        $(".message").css("color", "black")
    })


    //正则验证
    function phoneverification() {
        var phone = document.getElementById('telephone').value;
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            $("#telephone").css("color", "red")
            $(".message_nav>span").text("*手机格式错误");
            return false
        } else {
            $("#telephone").css("color", "black")
            $(".message_nav>span").text("");
            return false
        }

        if (phone == "") {
            $(".message_nav>span").text("*手机号不能为空");
            return false
        }
    }

    // 输入框点击时动画
    $("#telephone").focus(function() {
        $("#tel_x").css("width", "296px");
        $("#account_x").css("width", "0px");
        var phone = document.getElementById('telephone').value;

        phoneverification();

    })

    // 输入框点击时动画
    $("#account").focus(function() {
        $("#tel_x").css("width", "0px");
        Verification
        $("#account_x").css("width", "296px");
        var phone = document.getElementById('telephone').value;

        phoneverification();
    })


    //登录按钮
    $(".login").click(function() {
        phoneverification();
    })

    //获取验证码
    var count = 60;
    $(".Verification").click(function() {
        //正则验证
        var phone = document.getElementById('telephone').value;
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            $("#telephone").css("color", "red")
            $(".message_nav>span").text("*手机格式错误");
            return false
        } else {
            $("#telephone").css("color", "black")
            $(".message_nav>span").text("");
        }

        if (phone == "") {
            $(".message_nav>span").text("*手机号不能为空");
            return false
        }

        //倒计时
        $(".Verification").attr("disabled", "disabled"); //点击一次不可再点
        var interval = setInterval(function() { //定义定时器
            $(".Verification").val("已发送" + "(" + count + ")");
            count--;
            if (count == 0) {
                clearInterval(interval); //清除定时器
                $(".Verification").val("重新获取验证码");
                $(".Verification").removeAttr("disabled"); //删除这个属性
                count = 60;
            }
        }, 1000);
    })


    $(".User").click(function() {
        $(".Sing_big ").show();
    })
    $(".close_nav").click(function() {
        $(".Sing_big").hide();
    })
</script>